/**
 * Tailwind CSS 覆盖和兼容性样式
 * 确保医疗数字孪生设计系统与 Tailwind 兼容
 */

/* 覆盖 Tailwind 的颜色变量，使用我们的设计系统 */
:root {
  /* 覆盖 Tailwind 的默认颜色 */
  --tw-color-primary: var(--primary-500);
  --tw-color-secondary: var(--secondary-500);
  --tw-color-success: var(--success);
  --tw-color-warning: var(--warning);
  --tw-color-error: var(--error);
  --tw-color-info: var(--info);
}

/* 确保我们的按钮样式优先级高于 Tailwind */
.btn {
  @apply inline-flex items-center justify-center;
  /* 我们的设计系统样式会覆盖这些基础样式 */
}

.card {
  @apply block;
  /* 确保卡片基础样式正确 */
}

/* 实用工具类扩展 */
/* 医疗特定的颜色实用类 */
.text-heatmap-low {
  color: var(--heatmap-low);
}

.text-heatmap-medium {
  color: var(--heatmap-medium);
}

.text-heatmap-high {
  color: var(--heatmap-high);
}

.text-trajectory-normal {
  color: var(--trajectory-normal);
}

.text-trajectory-emergency {
  color: var(--trajectory-emergency);
}

.text-bottleneck {
  color: var(--bottleneck);
}

.text-optimized-path {
  color: var(--optimized-path);
}

.bg-heatmap-low {
  background-color: var(--heatmap-low);
}

.bg-heatmap-medium {
  background-color: var(--heatmap-medium);
}

.bg-heatmap-high {
  background-color: var(--heatmap-high);
}

.bg-trajectory-normal {
  background-color: var(--trajectory-normal);
}

.bg-trajectory-emergency {
  background-color: var(--trajectory-emergency);
}

.bg-bottleneck {
  background-color: var(--bottleneck);
}

.bg-optimized-path {
  background-color: var(--optimized-path);
}

/* 3D 场景颜色 */
.text-3d-wall {
  color: var(--3d-wall);
}

.text-3d-floor {
  color: var(--3d-floor);
}

.text-3d-door {
  color: var(--3d-door);
}

.text-3d-window {
  color: var(--3d-window);
}

.text-3d-asset {
  color: var(--3d-asset);
}

.bg-3d-wall {
  background-color: var(--3d-wall);
}

.bg-3d-floor {
  background-color: var(--3d-floor);
}

.bg-3d-door {
  background-color: var(--3d-door);
}

.bg-3d-window {
  background-color: var(--3d-window);
}

.bg-3d-asset {
  background-color: var(--3d-asset);
}

/* 医疗特定的阴影 */
.shadow-medical-1 {
  box-shadow: var(--shadow-1);
}

.shadow-medical-2 {
  box-shadow: var(--shadow-2);
}

.shadow-medical-3 {
  box-shadow: var(--shadow-3);
}

/* 医疗特定的边框 */
.border-medical-light {
  border: var(--border-light);
}

.border-medical-medium {
  border: var(--border-medium);
}

.border-medical-heavy {
  border: var(--border-heavy);
}

/* 响应式隐藏/显示 */
.hide-mobile {
  @apply block;
}

@media (max-width: 640px) {
  .hide-mobile {
    @apply hidden;
  }
}

.show-mobile {
  @apply hidden;
}

@media (max-width: 640px) {
  .show-mobile {
    @apply block;
  }
}

/* 医疗特定的动画 */
.animate-pulse-slow {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.2s ease-out;
}

/* 动画定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 兼容性修复 */
/* 确保我们的字体堆栈优先 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    var(--font-geist-sans), sans-serif !important;
}

/* 确保颜色变量正确应用 */
* {
  border-color: var(--gray-300);
}

/* 重置一些 Tailwind 可能冲突的样式 */
.btn,
.card,
.alert-tag {
  @apply border-0;
}

/* 打印样式兼容性 */
@media print {
  .no-print {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  /* 确保医疗图表在打印时可见 */
  .heatmap-container,
  .timeline-container,
  .performance-panel {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}